<template>
  <div ref="echart" class="echart"></div>
</template>

<script>
export default {
  data() {
    return {
      echart: null
    }
  },
  mounted() {
    this.initDta()
  },
  methods: {
    initDta() {
      this.echart = this.$echarts.init(this.$refs.echart)
      const option = {
        tooltip: {
          trigger: 'item',
          show: false,
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '65%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
                color: '#FFF',
                formatter: '{d}% \n{b}',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                name: "普通货船",
                value: 374,
                itemStyle: {
                  color:  {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#4DFF7B', // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#00FFFF', // 100% 处的颜色
                      },
                    ],
                    global: false, // 缺省为 false
                  },
                }
              },
              {
                name: "液货船",
                value: 50,
                itemStyle: {
                  color:    '#1A3048'
                }
              }
            ],
          },
        ],
      }
      this.echart.setOption(option)
      this.echart.dispatchAction({
        type: 'highlight',
        dataIndex: 0,
      })

      // 监听鼠标滑入事件
      this.echart.on('mouseover', (e) => {
        this.echart.dispatchAction({
          type: 'downplay',
          seriesIndex: e.seriesIndex,
        })
        this.echart.dispatchAction({
          type: 'highlight',
          dataIndex: e.dataIndex,
        })
      })
      this.echart.on('mouseout', (e) => {
        this.echart.dispatchAction({
          type: 'downplay',
          seriesIndex: e.seriesIndex,
        })
        this.echart.dispatchAction({
          type: 'highlight',
          dataIndex: e.dataIndex,
        })
      })
    }
  }
}
</script>

<style scoped lang="less">
.echart {
  width: 100%;
  height: 100%;
}
</style>
